
<template>
  <div>
    <el-card class="box-card">
      <div
        slot="header"
        class="clearfix"
      >

        <el-button
          style="float: left; padding: 3px 0;margin-right:10px"
          type="text"
        ><img
            :src="backImg"
            style="width:25px;height:25px;cursor:pointer"
            @click="handleBack"
          ></el-button>
        <span :style="{color:theme,padding:'5px 0',display:'block',fontWeight:'bold'}">{{data.name}}</span>

      </div>
      <div class="text item">
        {{data.content }}
      </div>

      <el-button
        type="primary"
        :style="{backgroundColor:theme,border:0}"
        size="small"
        style="margin:20px 0;display:block;float:right;"
        @click="getExam()"
        :icon="show=='true'?'el-icon-caret-top':'el-icon-caret-bottom'"
      >随堂测验</el-button>

    </el-card>
    <transition name="el-zoom-in-top">
      <el-card
        class="box-card "
        v-show="show"
        style="margin-top:20px"
      >

        <el-alert
          type="warning"
          description="无考核内容"
          center
          v-show="questions.length==0"
        >
        </el-alert>

        <div
          v-show="questions.length>0"
          v-for="(quData,index) in questions"
          :key="quData.id"
        >
          <p>{{index+1}}.{{quData.stem}}</p>
          <div v-if="quData.type == 1 ">
            <el-radio-group v-model="radioValue">
              <el-radio
                v-for="item in quData.option"
                :label="item.id"
                :key="item.id"
              >{{ item.name}}.{{item.content}}
                <div
                  v-if="item.image!=null && item.image!=''"
                  style="clear: both"
                >
                  <el-image
                    :src="item.image"
                    style="max-width:100%;"
                  />
                </div>
              </el-radio>
            </el-radio-group>
          </div>
          <!-- 多选题 -->
          <div v-if="quData.type == 2">
            <el-checkbox-group v-model="multiValue">
              <el-checkbox
                v-for="item in quData.option"
                :label="item.id"
                :key="item.id"
              >{{ item.name }}.{{ item.content }}
                <div
                  v-if="item.image!=null && item.image!=''"
                  style="clear: both"
                >
                  <el-image
                    :src="item.image"
                    style="max-width:100%;"
                  />
                </div>
              </el-checkbox>
            </el-checkbox-group>

          </div>
          <!-- 判断题 -->
          <div v-if="quData.type == 3">
            <el-radio-group v-model="radioValue">
              <el-radio label="1">对 </el-radio>
              <el-radio label="0">错 </el-radio>
            </el-radio-group>

          </div>
          <!-- 问答题 -->
          <div v-if="quData.type == 4">

            <el-input
              type="textarea"
              v-model="questionValue"
              placeholder="请填写答案"
            ></el-input>

          </div>

        </div>
      </el-card>
    </transition>
  </div>
</template>
<script>
import Editor from "@/views/vadmin/question/components/editor";
import backImg from "@/assets/images/back.png";
import { mapGetters, mapState } from "vuex";
import { knowledgeDetail } from "@/api/vadmin/course/course";
import { getTrainTest } from "@/api/vadmin/train/train";
import variables from "@/assets/styles/variables.scss";
export default {
  name: "newKnowledge",
  components: { Editor },
  data() {
    return {
      // 遮罩层
      loading: true,
      backImg: backImg,
      data: "",
      show: false,
      questions: [],
      radioValue: "",
      multiValue: [],
      questionValue: "",
    };
  },
  props: ["knowledgeId"],
  watch: {
    data(val) {
      this.form = val;
      // console.log(val);
    },
  },
  computed: {
    ...mapState(["settings"]),
    variables() {
      return variables;
    },
    theme() {
      return this.$store.state.settings.theme;
    },
  },

  mounted() {},
  created() {
    this.getData();
    this.getList();
  },
  methods: {
    handleBack() {
      // console.log("学习");
      this.$emit("handleCon", "List");
    },
    getData() {
      knowledgeDetail(this.knowledgeId).then((res) => {
        this.data = res;
      });
    },
    getList() {
      // console.log("wowowo ");
    },
    // 获取题目
    getExam() {
      this.show = !this.show;
      getTrainTest({ knowledge: this.knowledgeId }).then((res) => {
        console.log("随堂测验", res);
        this.show = true;
        if (res > 0) {
          this.questions = res;
        } else {
          this.questions = [];
        }
      });
    },
  },
};
</script>
